<template>
  <!-- 存管结算账户资料 -->
  <div>
    <div class="bt_box">
      <p class="btText">存管结算账户资料</p>
      <template v-if="pathType != 'merchantsDetail'">
        <el-button size="" type="primary" @click="depositMide" v-if="!depositShow && status != '审核通过'">修改信息
        </el-button>
        <el-button size="" type="warning" @click="settlementSumit" v-if="depositShow" :loading="buttonLoding">保存
        </el-button>
        <el-button size="" type="" @click="cancellation" v-if="depositShow">取消
        </el-button>
      </template>
    </div>
    <div class="information" v-loading="viewLoading" element-loading-text="支行加载中"
      element-loading-spinner="el-icon-loading">
      <div class="list">
        <div class="lable">结算方式:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.settleBankTypeDict }}
        </div>
        <div class="txt" v-if="depositShow">
          <el-select v-model="depositFrom.settleBankType" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <div class="lable">结算费率:</div>
        <div class="text" v-if="!depositShow">{{ settleDepositInfo.fee }}</div>
        <div v-if="depositShow">
          <el-input v-model="depositFrom.fee" placeholder="请输入" ></el-input>
          
        </div>
      </div>
      <div class="list">
        <div class="lable">结算银行卡号:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.balanceAccCardno }}
        </div>
        <div v-if="depositShow" >
          <el-input v-model="depositFrom.balanceAccCardno" placeholder="请输入" style="width: 200px; padding-right: 10px;"></el-input>
          <el-button size="small" type="primary" @click="openingBank(depositFrom.balanceAccCardno)">查询匹配开户行</el-button>
        </div>
      </div>
      <div class="list">
        <div class="lable">开户行名称:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.bankName }}
        </div>
        <div class="txt" v-if="depositShow">
          <!-- <el-select v-model="depositFrom.bankType" filterable placeholder="请选择" @change="changes">
            <el-option v-for="item in bankOptionone" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select> -->
          <el-input v-model="depositFrom.bankName" placeholder="请输入" :style="{width: inputWidth}"
            :disabled="bankRegionAvalue.length==0?false:true"></el-input>
          <el-tooltip class="item" effect="dark" content="如需更改开户行，请先删除银行地区" placement="top-start"
            v-if="bankRegionAvalue.length!=0">
            <div class="el-icon-question" style="color: red;margin-left: 10px;cursor: pointer"></div>
          </el-tooltip>
          <!-- <el-input v-model="depositFrom.bankName" placeholder="请输入"></el-input> -->
        </div>
      </div>
      <div class="list">
        <div class="lable">银行地区:</div>
        <div class="text" v-if="!depositShow">{{ settleDepositInfo.areaName }}</div>
        <div v-if="depositShow">
          <el-cascader :options="regionOptions" :props="{ value: 'id',label: 'label',children: 'children'}" filterable
            @change="bankRegionChange" v-model="bankRegionAvalue" clearable>
          </el-cascader>
        </div>
      </div>
      <div class="list">
        <div class="lable">所属支行名称:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.openAccBankname }}
        </div>
        <div class="txt" v-if="depositShow">
          <el-select v-model="depositFrom.openAccBanktype" placeholder="请选择" filterable @change="changesTwo">
            <el-option v-for="item in bankOptiontwo" :key="item.bankCode" :label="item.bankName" :value="item.bankCode">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <div class="lable">银行预留手机号:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.bankMobile }}
        </div>
        <div v-if="depositShow">
          <el-input v-model="depositFrom.bankMobile" placeholder="请输入" :style="{width: inputWidth}"></el-input>
        </div>
      </div>
      <div class="list">
        <div class="lable">结算类型:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.clearingTypeDict }}
        </div>
        <div class="txt" v-if="depositShow">
          <el-select v-model="depositFrom.clearingType" placeholder="请选择">
            <el-option v-for="item in options3" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list" style="margin-bottom: 30px">
        <div class="lable">结算账户名称:</div>
        <div class="text" v-if="!depositShow">
          {{ settleDepositInfo.balanceAccName }}
        </div>
        <div v-if="depositShow">
          <el-input v-model="depositFrom.balanceAccName" placeholder="请输入" :style="{width: inputWidth}"></el-input>
        </div>
      </div>

      <template v-if="merchantType=='1' && depositFrom.settleBankType=='2'">  <!-- 备用结算信息（企业商户对法人私卡结算时，需要填写备用结算信息） -->
        <div class="list" style="position: relative;">
            <p class="standby_txt">备用结算信息：（请填写对公账户信息）</p>
            <div class="lable">结算银行卡号:</div>
            <div class="text" v-if="!depositShow">
              {{ settleDepositInfo.standStlAccNo }}
            </div>
            <div v-if="depositShow" >
              <el-input v-model="depositFrom.standStlAccNo" placeholder="请输入" style="width: 200px; padding-right: 10px;"></el-input>
              <el-button size="small" type="primary" @click="openingBankStand(depositFrom.standStlAccNo)">查询匹配开户行</el-button>
            </div>
          </div>
          <div class="list">
            <div class="lable">开户行名称:</div>
            <div class="text" v-if="!depositShow">
              {{ settleDepositInfo.localStandBankName }}
            </div>
            <div class="txt" v-if="depositShow">
              <el-input v-model="depositFrom.localStandBankName" placeholder="请输入" :style="{width: inputWidth}"
                :disabled="standBankRegionAvalue.length==0?false:true"></el-input>
              <el-tooltip class="item" effect="dark" content="如需更改开户行，请先删除银行地区" placement="top-start"
                v-if="standBankRegionAvalue.length!=0">
                <div class="el-icon-question" style="color: red;margin-left: 10px;cursor: pointer"></div>
              </el-tooltip>
            </div>
          </div>
          <div class="list">
            <div class="lable">银行地区:</div>
            <div class="text" v-if="!depositShow">{{ settleDepositInfo.standAreaName }}</div>
            <div v-if="depositShow">
              <el-cascader :options="regionOptions" :props="{ value: 'id',label: 'label',children: 'children'}"
                filterable @change="standBankRegionChange" v-model="standBankRegionAvalue" clearable>
              </el-cascader>
            </div>
          </div>
          <div class="list">
            <div class="lable">所属支行名称:</div>
            <div class="text" v-if="!depositShow">
              {{ settleDepositInfo.localStandBankSubName }}
            </div>
            <div class="txt" v-if="depositShow">
              <el-select v-model="depositFrom.standBankSubCode" placeholder="请选择" filterable @change="changesTwoStand">
                <el-option v-for="item in bankOptiontwoStand" :key="item.bankCode" :label="item.bankName" :value="item.bankCode">
                </el-option>
              </el-select>
            </div>
          </div>
      </template>

      <!-- <div class="list" style="align-items: center;width: 100%;">
        <div class="lable">微信授权:</div>
        <div class="text" style="width: 130px">
          <span v-if="settleDepositInfo.wechat==1">未授权</span>
          <span v-if="settleDepositInfo.wechat==2">已授权</span>
        </div>
        <div class="lable">支付宝授权:</div>
        <div class="text" style="width: 100px">
          <span v-if="settleDepositInfo.ali==1">未授权</span>
          <span v-if="settleDepositInfo.ali==2">已授权</span>
        </div>
        <div>
          <el-button size="small" type="primary" @click="empowerQuery" :loading="empowerLoading" v-if="settleDepositInfo.wechat!=''">查询</el-button>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";
  //api
  import {
    adminDict,
    settleDepositYisheng,
    getBank,
    updateSettleYisheng,
    getBankCity,
    getBankBranch,
    ysAuthState,
    entryV1FuncYSBankBin
  } from "@/api/merchants";
  export default {
    components: {},
    props: {
      id: String,
      status: String,
      pathType: String,
      merchantType: String,
    },
    data() {
      return {
        inputWidth: '200px',
        viewLoading: false,
        buttonLoding: false,
        depositShow: false,
        empowerLoading: false,//授权查询loading
        options2: [], //结算方式
        options3: [], //结算类型
        bankOptionone: [], //银行
        bankOptiontwo: [], //支行
        regionOptions: [], //城市数组
        regionAvalue: [], //城市回显
        bankRegionAvalue: [], //银行城市选择回显
        settleDepositInfo: {}, //存管结算账户资料
        depositFrom: {
          //存管结算账户资料提交
          id: "",
          merchantId: "", //商家id
          settleBankType: "", //结算方式
          clearingType: "", //结算类型
          fee: "", //费率
          balanceAccCardno: "", //结算银行卡号
          bankName: "", //开户行名称
          bankType: "", //开户行code
          openAccBanktype: "", //所属支行code
          openAccBankname: "", //所属支行名称
          bankMobile: "", //银行预留电话
          balanceAccName: '', //结算账户名称
          province: "", //省
          city: "", //市
          standStlAccNo:'',//备用结算账号
          localStandBankName:'',//备用结算银行名称
          standAreaName:'',//备用银行地区回显
          localStandBankSubName:'',//备用支行名称
          standBankCity:'',//备用结算账户银行开户行市代码
          standBankProvince:'',//备用结算账户银行开户行省代码
          standBankSubCode:'',//备用结算账户开户行支行编号
        },
        bankRegionOptions: [], //银行城市数组
        bankOptiontwoStand:[],//备用支行
      };
    },
    computed: {},
    created() {
      this.getbankType();
      this.getclearingType();
      this.getBankCitys();
      this.getBank();
      this.getsettleDeposit();
    },
    methods: {
      open(){
        this.getsettleDeposit()
      },
      cancellation() { //取消
        this.depositShow = false
        this.getsettleDeposit()
      },
      getbankType() {
        //获取结算方式字典
        const params = {
          dictType: "manage_settle_bank_type",
        };
        adminDict(params).then((res) => {
          this.options2 = res.result[0].dictList;
          this.options2.splice(2, 2);
        });
      },
      getclearingType() {
        //获取结算类型字典
        const params = {
          dictType: "merchant_clearing_type",
        };
        adminDict(params).then((res) => {
          this.options3 = res.result[0].dictList;
        });
      },
      getsettleDeposit() {
        //查询易生进件商户存管结算账户信息
        const merchantId = this.id;
        settleDepositYisheng(merchantId)
          .then((res) => {
            this.settleDepositInfo = res.result;
            this.depositFrom.id = res.result.id;
            this.depositFrom.merchantId = this.id;
            this.depositFrom.settleBankType = res.result.settleBankType;
            this.depositFrom.clearingType = res.result.clearingType;
            this.depositFrom.fee = res.result.fee;
            this.depositFrom.balanceAccCardno = res.result.balanceAccCardno;
            this.depositFrom.bankMobile = res.result.bankMobile;
            this.depositFrom.openAccBanktype = res.result.openAccBanktype;
            this.depositFrom.bankType = res.result.bankType;
            this.depositFrom.bankName = res.result.bankName;
            this.depositFrom.openAccBankname = res.result.openAccBankname;
            this.depositFrom.balanceAccName = res.result.balanceAccName
            this.$emit("getdepositFromId", res.result.id);
            //处理银行区域回显
            if (res.result.province != '') {
              let bankRegionAvalue = [];
              bankRegionAvalue.push(res.result.province);
              bankRegionAvalue.push(res.result.city);
              bankRegionAvalue.join(",");
              this.bankRegionAvalue = bankRegionAvalue;
              this.depositFrom.province = res.result.province;
              this.depositFrom.city = res.result.city
              this.getBank();
            }else{
              this.bankRegionAvalue = []
              this.depositFrom.province = res.result.province;
              this.depositFrom.city = res.result.city
            }
            if (this.depositFrom.province != '') {
              this.getBankBranchs();
            }
            //备用信息 standBankRegionAvalue
            this.depositFrom.standStlAccNo = res.result.standStlAccNo
            this.depositFrom.localStandBankName = res.result.localStandBankName
            this.depositFrom.standAreaName = res.result.standAreaName
            this.depositFrom.localStandBankSubName = res.result.localStandBankSubName
            this.depositFrom.standBankCity = res.result.standBankCity
            this.depositFrom.standBankProvince = res.result.standBankProvince
            this.depositFrom.standBankSubCode = res.result.standBankSubCode
            //处理备用所属区域回显
            if (res.result.standBankProvince != '') {
              let standBankRegionAvalue = [];
              standBankRegionAvalue.push(res.result.standBankProvince);
              standBankRegionAvalue.push(res.result.standBankCity);
              standBankRegionAvalue.join(",");
              this.standBankRegionAvalue = standBankRegionAvalue;
              this.depositFrom.standBankProvince = res.result.standBankProvince;
              this.depositFrom.standBankCity = res.result.standBankCity
              this.getBank();
            } else {
              this.standBankRegionAvalue = [];
              this.depositFrom.standBankProvince = res.result.standBankProvince;
              this.depositFrom.standBankCity = res.result.standBankCity
            }
            if (this.depositFrom.standBankProvince != '') {
              this.getBankBranchsStand();
            }
            // this.getBank();
          })
          .finally(() => {
            this.loading = false;
          });
      },
      // 授权查询 
      empowerQuery() {
        this.empowerLoading = true
        ysAuthState(this.settleDepositInfo.accountId)
          .then((res) => {
            this.$message.success('查询成功');
            this.getsettleDeposit()
            this.empowerLoading = false;
          })
          .catch(() => {
            this.empowerLoading = false
          });
      },
      getBankCitys() { //中台查询银盛城市
        let params = {}
        getBankCity(params).then((res) => {
          this.regionOptions = res.result;
          this.regionOptions.forEach((item) => {
            item.children.forEach((items) => {
              if (items.children.length == 0) {
                items.children = null
              }
            })
          })
        });
      },
      getBank() {
        //获取银行信息
        const params = {};
        getBank(params).then((res) => {
          // console.log(res.result);
          this.bankOptionone = res.result;
          // if (this.depositFrom.bankType != "") {
          //   this.bankOptionone.map((item, index) => {
          //     if (this.depositFrom.bankType == item.id) {
          //       this.bankOptiontwo = item.children;
          //     }
          //   });
          // };
        });
      },
      depositMide() {
        this.depositShow = true;
      },
      changes(value) {
        //银行
        console.log(value);
        this.bankOptionone.map((item, index) => {
          if (value == item.id) {
            this.bankOptiontwo = item.children;
            this.depositFrom.bankType = item.id;
            this.depositFrom.bankName = item.label;
          }
        });
        this.depositFrom.openAccBanktype = "";
      },
      //银行区域选择
      bankRegionChange(value) {
        if (value.length == 0) {
          this.bankRegionAvalue = []
          this.depositFrom.openAccBanktype = '';
          this.depositFrom.openAccBankname = '';
          this.bankOptiontwo = []
          return
        }
        this.depositFrom.province = value[0];
        this.depositFrom.city = value[1];
        if (this.depositFrom.bankName == '') {
          this.$message.error('请输入开户行名称');
          this.bankRegionAvalue = []
          this.depositFrom.openAccBanktype = '';
          this.depositFrom.openAccBankname = '';
          this.bankOptiontwo = []
          return
        } else {
          this.getBankBranchs()
        }
        this.depositFrom.openAccBanktype = '';
        this.depositFrom.openAccBankname = '';
      },
      getBankBranchs() { //获取支行信息
        const params = {
          bankName: this.depositFrom.bankName,
          cityId: this.depositFrom.city,
          provinceId: this.depositFrom.province
        };
        this.viewLoading = true
        getBankBranch(params).then((res) => {
            this.bankOptiontwo = res.result
            this.viewLoading = false
          })
          .catch(() => {
            this.viewLoading = false;
          });
      },
      changesTwo(id) {
        //支行选择
        console.log(id)
        this.bankOptiontwo.map((item, index) => {
          if (id == item.bankCode) {
            this.depositFrom.openAccBanktype = item.bankCode;
            this.depositFrom.openAccBankname = item.bankName;
          }
        });
      },
      settlementSumit() {
        this.buttonLoding = true;
        var params = {
          ...this.depositFrom,
        };
        updateSettleYisheng(params)
          .then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1500,
            });
            this.getsettleDeposit();
            setTimeout(() => {
              this.buttonLoding = false;
              this.depositShow = false;
            }, 800);
          })
          .finally(() => {
            this.buttonLoding = false;
          });
      },
          // 查询匹配开户行
       openingBank(e){
        var params = {
          bankCardNo:e
        }
        entryV1FuncYSBankBin(params).then(res=>{
          var {bankName,bankType} = res.result
          if(bankName!= '' && bankType!=''){
             // this.settleDepositInfo.bankName = 
              this.depositFrom.bankName = bankName
              this.depositFrom.bankType = bankType
              this.$message({ message: "查询成功", type: "success", duration: 1500,});
          }else{
            this.$message({ message:'未查询到银行卡开户行相关信息', type: "error", duration: 1500,});
          }
        })
      },

      // 查询备用匹配开户行
      openingBankStand(e){
        var params = {
          bankCardNo:e
        }
        entryV1FuncYSBankBin(params).then(res=>{
          var {bankName} = res.result
          if(bankName!= ''){
              this.depositFrom.localStandBankName = bankName
              // this.depositFrom.bankType = bankType
              this.$message({ message: "查询成功", type: "success", duration: 1500,});
          }else{
            this.$message({ message:'未查询到银行卡开户行相关信息', type: "error", duration: 1500,});
          }
        })
      },
      //备用银行区域选择
      standBankRegionChange(value){
        if (value.length == 0) {
          this.standBankRegionAvalue = []
          this.depositFrom.standBankSubCode = '';
          this.depositFrom.localStandBankSubName = '';
          this.bankOptiontwoStand = []
          return
        }
        this.depositFrom.standBankProvince = value[0];
        this.depositFrom.standBankCity = value[1];
        if (this.depositFrom.bankName == '') {
          this.$message.error('请输入开户行名称');
          this.standBankRegionAvalue = []
          this.depositFrom.standBankSubCode = '';
          this.depositFrom.localStandBankSubName = '';
          this.bankOptiontwoStand = []
          return
        } else {
          this.getBankBranchsStand()
        }
        this.depositFrom.standBankSubCode = '';
        this.depositFrom.localStandBankSubName = '';
      },
      getBankBranchsStand() { //获取备用支行信息
        const params = {
          bankName: this.depositFrom.localStandBankName,
          cityId: this.depositFrom.standBankCity,
          provinceId: this.depositFrom.standBankProvince
        };
        this.viewLoading = true
        getBankBranch(params).then((res) => {
            this.bankOptiontwoStand = res.result
            this.viewLoading = false
          })
          .catch(() => {
            this.viewLoading = false;
          });
      },
      //备用支行选择
      changesTwoStand(id) {
        //支行选择
        this.bankOptiontwoStand.map((item, index) => {
          if (id == item.bankCode) {
            this.depositFrom.standBankSubCode = item.bankCode;
            this.depositFrom.localStandBankSubName = item.bankName;
          }
        });
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "../../style/incomingDetail";
  .standby_txt{
    position: absolute;
    top: -30px;
    font-size: 14px;
    color: #1890ff;
  }
</style>
